<script setup>
import { ref, watch } from 'vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { useUser } from '@/pinia-store/user';
import { uploadFileApi } from '@/api/common.js';

const emit = defineEmits(['update:value', 'change']);

const props = defineProps({
  fileName: {
    type: String,
    default: 'file'
  },
  maxCount: {
    type: Number,
    default: 20
  },
  multiple: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  bucket: {
    type: String,
    default: 'worldgroupoa'
  },
  value: {
    type: Array,
    default: () => {
      return []
    }
  }
});

watch(() => props.value, () => {
  init()
}, {
  deep: true
})

const loading = ref(false)
const fileList = ref([])
const customRequest = (file) => {
  if (props.value.length >= props.maxCount) {
    fileList.value.splice(fileList.value.length - 1, 1)
    emit('change', file)
    emit('update:value', [...props.value])
    return message.warning(`最多只能上传${props.maxCount}张图片`)
  }
  loading.value = true
  let formData = new FormData()
  formData.append(props.fileName, file.file)
  uploadFileApi(props.bucket, formData).then(({data:res}) => {
    emit('change', file)
    emit('update:value', [...props.value, res.data])
  }).catch(() => {
    fileList.value.splice(fileList.value.length - 1, 1)
    emit('change', file)
    emit('update:value', [...props.value])
  }).finally(() => {
    loading.value = false
  })
}
const handleChange = (info) => {
  if (info.file.status==='removed') {
    let fileUrls = fileList.value.map(item => {
      return item.url
    })
    emit('update:value', fileUrls)
    return
  }
}

const init = () => {
  fileList.value = props.value.map(item => {
    return {
      url: item,
      response: {
        code: 0,
        data: item
      }
    }
  })
}
const visible = ref(false)
const perviewImg = ref('')
const setVisible = (file) => {
  if (!file) {
    visible.value = false
    perviewImg.value = ''
    return
  }
  perviewImg.value = file.url || file.response.data
  visible.value = true
}

</script>

<template>
  <a-upload
    v-model:file-list="fileList"
    accept="image/*"
    :customRequest="customRequest"
    :name="props.fileName"
    :maxCount="props.maxCount"
    :multiple="props.multiple"
    :disabled="props.disabled"
    :headers="{'Token': useUser().token}"
    list-type="picture-card"
    class="avatar-uploader"
    :action="''"
    @change="handleChange"
    @preview="setVisible"
  >
    <div>
      <loading-outlined v-if="loading"></loading-outlined>
      <plus-outlined v-else></plus-outlined>
      <div class="ant-upload-text">上传</div>
    </div>
  </a-upload>
  <a-image
    :style="{ display: 'none' }"
    :preview="{
      visible,
      onVisibleChange: setVisible,
    }"
    :src="perviewImg"
  />
</template>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 128px;
  height: 128px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
